<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">


        <div class="container">
          <el-form :inline="true" size="small">
            <el-form-item label="参与状态：" class="mr10">
              <el-select v-model="data.status" placeholder="请选择状态" class="selWidth" @change="getIssueList">
                <el-option label="全部" value=""/>
                <el-option label="排队中" value="0"/>
                <el-option label="已参与" value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="排序方式：" class="mr10">
              <el-select v-model="data.sort" placeholder="请选择排序方式" class="selWidth" @change="getIssueList">
                <el-option label="全部" value=""/>
                <el-option label="正序" value="asc"/>
                <el-option label="倒序" value="desc"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="container">
          <el-form :inline="true" size="small">
            <el-form-item  class="mr10">
              <div class="block">

                <el-date-picker
                  value-format="yyyy/MM/dd HH:mm:ss" format="yyyy/MM/dd HH:mm:ss" size="small" type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期" placement="bottom-end" placeholder="自定义时间"
                  style="width: 400px;"
                  v-model="timeVal"
                  @change="onchangeTime"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item  class="mr10">
              <div class="block">
                <el-form-item  class="mr10">
                  <el-input v-model="data.keyword"  placeholder="请输入手机号"
                            class="selWidth" type="number"
                  >
                    <el-button slot="append"  class="el-button-solt" @click="getIssueList" style="color: #fff">点击搜索</el-button>
                  </el-input>
                </el-form-item>
              </div>
            </el-form-item>


          </el-form>

        </div>


      </div>
      <el-table
        v-loading="Loading"
        :data="issueData.data"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          min-width="80"
        />
        <el-table-column
          prop="sort"
          label="序号"
          min-width="80"
        />
        <el-table-column
          label="账号"
          min-width="100"
        >
          <template slot-scope="scope">
            <span>{{scope.row.user.account}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="昵称"
          min-width="100"
        >
          <template slot-scope="scope">
            <span >{{scope.row.user.nickname}}</span>

          </template>
        </el-table-column>

        <el-table-column
          prop="update_time"
          label="出局状态"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">排队中</span>
            <span v-else>已参与</span>
          </template>
        </el-table-column>


        <el-table-column
          prop="create_time"
          label="参与时间"
          min-width="150"
        />
        <el-table-column
          label="更新时间"
          min-width="150"

        >
          <template slot-scope="scope">
            <span >{{scope.row.update_time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="sortPublicList(scope.row.id)">排序设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 30, 40, 50]"
          :page-size="tableFromIssue.limit"
          :current-page="data.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="issueData.total"
          @size-change="handleSizeChangeIssue"
          @current-change="pageChangeIssue"
        />
      </div>
    </el-card>
    <el-dialog title="推荐公排排序设置" :visible.sync="visiblePublic" width="600px" :before-close="handleClosePublic">
      <el-input v-model="sort"  placeholder="请输入想要的位序"
                class="selWidth" type="number"
      ></el-input>
      <div style="display: flex;margin-top: 20px;justify-content: right;">
        <el-button type="primary" icon="ios-search" label="default" class="mr15" size="small" @click="surePublic" :disabled="public">确定
        </el-button>
        <el-button class="ResetSearch mr10" size="small" type="reset" @click="visiblePublic=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { roterPre } from '@/settings'
import { getCrowFundingList, getRecommendList ,setRecommendSort} from '@/api/marketing'

export default {
  name: 'publicList',
  filters: {
    failFilter(status) {
      const statusMap = {
        'receive': '自己领取',
        'send': '后台发送',
        'give': '满赠',
        'new': '新人',
        'buy': '买赠送'
      }
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        0: '未使用',
        1: '已使用'
      }
      this.data.status = statusMap[status]
      return statusMap[status]
    }
  },
  data() {
    return {
      publicId:'',
      sort:'',
      visiblePublic:false,
      timeVal: [],
      merData: {
        number: null
      },
      data: {
        page: 1,
        limit: 20,
        sort: '',
        status: '',
        date: '',
        keyword:''
      },
      Loading: false,
      roterPre: roterPre,
      tableFromIssue: {
        page: 1,
        limit: 10,
        coupon: '',
        status: '',
        username: ''
      },
      issueData: {
        data: [],
        total: 0
      }
    }
  },
  mounted() {
    this.getIssueList()
  },
  methods: {

    // 列表
    getIssueList() {
      this.Loading = true
      getRecommendList(this.data).then(res => {
        this.issueData.data = res.data.list
        this.issueData.total = res.data.count
        this.Loading = false
      }).catch(res => {
        this.Loading = false
        this.$message.error(res.message)
      })
    },
    sortPublicList(id){
      this.visiblePublic = true
      this.publicId = id
    },
    surePublic(){
      setRecommendSort(this.publicId,{
        sort:this.sort
      }).then(res => {
        this.visiblePublic = false
        this.$message.success(res.message)
        this.getIssueList()
      }).catch(res => {
        this.Loading = false
        this.$message.error(res.message)
      })
      this.visiblePublic = false
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.data.date = e ? this.timeVal.join("-") : "";
      this.data.page = 1;
      this.getIssueList()
    },
    pageChangeIssue(page) {
      this.data.page = page
      this.getIssueList()
    },
    handleSizeChangeIssue(val) {
      this.data.limit = val
      this.getIssueList()
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  /deep/ .el-card__header {
    padding: 18px 20px 0 18px !important;
  }
}

.selWidth {
  width: 300px !important;
}

.seachTiele {
  line-height: 35px;
}

.fa {
  color: #0a6aa1;
  display: block;
}

.sheng {
  color: #ff0000;
  display: block;
}
</style>
